import { Modal } from "antd";
import React, { useMemo, useRef } from "react";
import { LuckyGrid } from '@lucky-canvas/react'


type PreviewLuckyProps = {
  open: boolean
  onClose: () => void
  title: string
  param: Record<string, any>
}
export function PreviewLucky(props: PreviewLuckyProps) {


  const myLucky = useRef()

  const restProps = useMemo(()=>{
     return props.param ? JSON.parse(props.param): {}
  },[props.param])
  return (
    <Modal
      title={`${props.title}预览`}
      visible={props.open}
      onCancel={props.onClose}
    >
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <LuckyGrid
          ref={myLucky}
          width="300px"
          height="300px"
          {...restProps}
          onStart={() => { // 点击抽奖按钮会触发star回调
            myLucky.current.play()
            setTimeout(() => {
              const index = Math.random() * 6 >> 0
              myLucky.current.stop(index)
            }, 2500)
          }}
          onEnd={prize => { // 抽奖结束会触发end回调
            
          }}
        />
      </div>

    </Modal>
  )
}